<template>
<div>
    <div class="middle">
        <div><span></span><input type="text"  v-model='msg'  @input='check( msg )' placeholder="请输入商家或商品名称"></div>
        <div class="search" @click='check( msg )'>搜索</div>
    </div>

</div>
</template>

<script>
import { mapState } from 'vuex'

export default {
    data () {
        return {
            msg:'',
            wordlist:[], 
        }
    },
    computed:{
        ...mapState('search',['searchWord']),
    },
    mounted () {

    },
    methods:{
        check(msg){
            setTimeout(()=>{
                this.$store.dispatch('search/showHot',false)
                if( msg.length !== 0 ){
                    this.$store.dispatch('search/search', msg )
                }
                if(msg.length == 0){
                    this.$store.dispatch('search/showHot',true)
                }
            },1000)
            
        },
        showHot(){
            this.$store.dispatch('search/showHot',false)
        }

    }
}
</script>

<style lang='scss' scoped>
.middle{
    width: 100%;
    height: 50px;
    padding: 10px 60px 10px 10px;
    position: relative;
    div:nth-of-type(1){
        position: relative;
        span{
            background-image: url();
            background-repeat: no-repeat;
            background-size: contain;
            display: inline-block;
            width: 15px;
            height: 15px;
            position: absolute;
            top: 50%;
            left: 10px;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%)
        };
        input{
            outline: none;
            border: none;
            width: 100%;
            font-size: 14px;
            line-height: 18px;
            padding: 6px 0 6px 28px;
            box-sizing: border-box;
            background-color: #e8e8e8;
            border-radius: 15px;
        };
    }
    .search{
        position: absolute;
        right: 0px;
        top: 0px;
        height: 44px;
        width: 60px;
        line-height: 50px;
        text-align: center;
        font-size: 15px;
        color: #999;
    }

}

</style>
